import React, { Component } from 'react';
import './index.scss'
class Index extends Component {
  state = {
    car: JSON.parse(localStorage.getItem('car')) || []
  }
  // 数量+ 函数
  handleAddCount(v) {
    // 解构数据
    const { car } = this.state
    // 通过id 找数据
    const item = car.find(item => item.id === v.id)
    // 数量递增
    item.count++
    // 保存数据
    this.setState({
      car
    })
    // 保存本地存储
    localStorage.setItem('car', JSON.stringify(car))
  }
  // 数量- 函数
  handleSubCount(v) {
    let { car } = this.state

    const item = car.find(item => item.id === v.id)

    // 判断操作的数据的数量是否小于等于1
    if(item.count <= 1) {
      // 系统确认框
      // 确认 就删除
      // 取消  啥也不做
      if(window.confirm('在减少就要删除了！！！！')) car = car.filter(item => item.id !== v.id)
    } else {
      // 数量大于 1 
      // 正常数量--
      item.count--
    }

    this.setState({
      car
    })

    localStorage.setItem('car', JSON.stringify(car))
  }
  // 总价函数
  totalPrice = () => {
    const { car } = this.state

    // 方式1 
    // let price = 0
    // car.forEach(v => {
    //   price += v.price * v.count
    // })
    // return price

    // 方式二
    // reduce 语法： 是数组的方法
    // 第一个参数 是一个回调函数
      //    该函数接受两个参数 p, n
      //    p 在第一次循环的时候， 获取初始值， 从第二次循环开始 
      //        每一次获取的是上一次回调函数的结果
      //    n 代表数组的每一项
    // 第二个参数 是初始值  
    // reduce 最终返回值  最后一次回调运行的结果
    return  car.reduce((p, n) => {
      // 第一次循环  p = 0  n =  { count: 1, price: 40 }  
      //          return 0 + 40 * 1      40
      // 第二次循环 p = 40 n = { count: 1, price: 559 }
      //          return 40 + 1 * 559   599
      // 第三次循环 p = 559 n = { count: 2, price: 457 }
      // return   559 + 2 * 477

      // 被选中 计算小计 不被选中不算小计
      return n.isChecked ? p + n.price * n.count : p
    }, 0)
  }
  // 单选点击事件 => 修改单个选中状态
  changeIsChecked(v) {
    const { car } = this.state
    const item = car.find(item => item.id === v.id)
    item.isChecked = !item.isChecked
    this.setState({
      car
    })
    localStorage.setItem('car', JSON.stringify(car))
  }
  // 全选点击事件 => 修改所有单个选中状态
  changeAllIsChecked(e) {
    // 获取全选状态
    const allChecked = e.target.checked
    const { car } = this.state
    car.forEach(v => {
      v.isChecked = allChecked
    })
    this.setState({
      car
    })
    localStorage.setItem('car', JSON.stringify(car))
  }
  // 全选状态
  isAllChecked = () => {
    const { car } = this.state
    // 返回值： 全真则真 一假为假
    return car.every(item => {
      return item.isChecked
    })
  }
  render() {
    const { car } = this.state
    return (
      <div>
        <ul>
          {
            car.map((v, i) => {
              return (
                <li key={i}>
                  {/* 受控组件 : 被 state 控制*/}
                  <input type="checkbox" checked={v.isChecked} onChange={ () => this.changeIsChecked(v) }/>
                  {/* 非受控组件： 不被 state 控制*/}
                  {/* <input type="checkbox" defaultChecked={v.isChecked} /> */}

                  <dl className="dl">
                    <dt><img src={v.url} alt="" /></dt>
                    <dd>
                      <h3>{v.title}</h3>
                      <p>{v.desc}</p>
                      <p>{v.price}</p>
                      <p>
                        <button onClick={() => this.handleSubCount(v)}>-</button>
                        <b>{v.count}</b>
                        <button onClick={() => this.handleAddCount(v)}>+</button>
                      </p>
                    </dd>
                  </dl>
                </li>
              )
            })
          }
        </ul>
        <h3 style={{ display: 'flex', justifyContent: 'space-around' }}>
          <b>
            {/* 受控组件 */}
          <input type="checkbox" checked={ this.isAllChecked() } onChange={ e => this.changeAllIsChecked(e) }/>全选
          </b>
          <b>总价钱： { this.totalPrice() }</b>
        </h3>
      </div>
    );
  }
}

export default Index;
